<template>
    <div class="admin-content">
        <div class="header align-center text-ffffff">
            <div class="system-name">{{ configs.name }}</div>

            <div class="justify-center align-center">
                <div @click="collapsed=!collapsed" style="margin-left: 20px">
                    <MenuUnfoldOutlined v-if="collapsed"/>
                    <MenuFoldOutlined v-else/>
                </div>

                <RedoOutlined style="margin-left: 10px" @click="reload"/>
            </div>

            <a-dropdown v-model:visible="dropdownVisible">
                <div class="justify-between align-center" @click.prevent style="margin-right: 20px;margin-left: auto;">
                    <span class="justify-center" style="margin-right: 5px;">{{ username }}</span>
                    <UpOutlined v-if="dropdownVisible"/>
                    <DownOutlined v-else/>
                </div>
                <template #overlay>
                    <a-menu @click="menuClick">
                        <a-menu-item key="edit">
                            修改密码
                        </a-menu-item>
                        <a-menu-item key="out">
                            退出
                        </a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>

        </div>

        <div class="flex-row block-2">
            <AsideMenu :menus="menus" :collapsed="collapsed"/>
            <div class="content">
                <router-view/>
            </div>
        </div>

        <EditMy v-model:showEditMy="showEditMy"/>
    </div>
</template>

<script>
import {defineAsyncComponent} from 'vue'
import router from "@/route/index";
import {routes} from '@/route/routes'

export default {
    name: 'layoutIndex',
    components: {
        AsideMenu: defineAsyncComponent(() => import('@/components/AsideMenu.vue')),
        EditMy: defineAsyncComponent(() => import('@/components/EditMy.vue')),
        MenuFoldOutlined: defineAsyncComponent(() => import('@ant-design/icons-vue/MenuFoldOutlined')),
        DownOutlined: defineAsyncComponent(() => import('@ant-design/icons-vue/DownOutlined')),
        UpOutlined: defineAsyncComponent(() => import('@ant-design/icons-vue/UpOutlined')),
        MenuUnfoldOutlined: defineAsyncComponent(() => import('@ant-design/icons-vue/MenuUnfoldOutlined')),
        RedoOutlined: defineAsyncComponent(() => import('@ant-design/icons-vue/RedoOutlined'))
    },
    data() {
        return {
            username: localStorage.getItem('username'),
            showEditMy: false,
            dropdownVisible: false,
            collapsed: false,
            topActiveMenu: null,
            permissions: [],
            menus: [],
            configs: {}
        }
    },
    watch: {
        permissions: {
            handler(newV, oldV) {
                // console.log(111, newV)
                this.menus = newV.filter(i => i.is_show && i.is_menu)
            },
            immediate: true
        }
    },
    async created() {
        this.getConfigs()
        await this.getPermissions();
        let selectedKeys = localStorage.getItem('menuSelectedKeys')
        if (selectedKeys) {
            this.selectedKeys = JSON.parse(selectedKeys)
            let findMenu = this.menus.find(i => i.permission_id * 1 === this.selectedKeys[0] * 1)
            // console.log('find', this.menus, find, this.selectedKeys[0])
            if (findMenu) {
              let findRoute = routes.find(i => i.path === findMenu.path)
              if(findRoute){
                router.push(findMenu.path)
              }
            }
        }
    },
    methods: {
        getConfigs() {
            this.get('/index/index/configs').then(({code, configs}) => {
                if (code === 1) {
                    this.configs = configs
                }
            })
        },
        reload() {
            window.location.reload();
        },
        menuClick({key}) {
            if (key === 'edit') this.showEditMy = true
            if (key === 'out') {
                localStorage.clear()
                router.push('/')
            }
        },
        async getPermissions() {
            const {permissions, code} = await this.get('/admin/user/permissions')
            // console.log(res)
            if (code === 1) {
                this.permissions = permissions
            }
        }
    },

}
</script>

<style lang="less">
.admin-content {
    .block-2 {
        width: 100%;

        .content {
            flex-grow: 1;
            padding: 10px;
        }
    }

    .header {
        @header-font-size: 18px;
        height: 40px;
        background: linear-gradient(to left, #7b4397, #2196f3);
        border-radius: 0;
        font-size: @header-font-size;

        .system-name {
            padding-left: 20px;
            color: #ffffff;
            font-weight: 600;
        }
    }
}
</style>
